import { Carousel } from 'antd'
import React from 'react'
import './homePage.scss'
import useHomePageApi from './hook/useHomePageApi'
const contentStyle: React.CSSProperties = {
  height: '10rem',
  color: '#fff',
  lineHeight: '10rem',
  textAlign: 'center',
  background: '#364d79',
  borderRadius: '.9375rem'
};
export default function HomePage() {
  const { bannerList } = useHomePageApi()
  return (
    <div className='home-page'>
      <div className='page-header'>
        {/* 轮播图 */}
        <Carousel autoplay effect="fade" arrows className='carousel'>
          {bannerList.map((el: any) => {
            return (
              <div key={el.url}>
                <img src={el.imageUrl} alt="" style={contentStyle} />
              </div>
            )
          })}
        </Carousel>
      </div>
    </div>
  )
}
